<template>
  <div class="resource-list">
    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
        <div><a-button type="primary" @click="visibleModalAdd=true">添加</a-button></div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      ellipsis
      style="margin-top: 10px"
      rowKey="apiId"
    >
      <template #action="{ record }">
        <a-button @click="edit(record)" :disabled="record.apiId==0">修改</a-button>
      </template>
    </a-table>
   <a-modal v-model:visible="visibleModalEdit" title="修改"  @ok="editSubmit">
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
        :model="editForm"
        ref="editForm"
      >
        <a-form-item label="资源名称" name="apiName">
          <a-input placeholder="请输入资源名称"  v-model:value="editForm.apiName" />
        </a-form-item>
        <a-form-item label="资源路径" name="apiUri">
          <a-input placeholder="请输入资源路径" v-model:value="editForm.apiUri" />
        </a-form-item>
        <a-form-item label="资源描述">
          <a-textarea placeholder="请输入描述" :rows="4"  v-model:value="editForm.apiDes"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model:visible="visibleModalAdd" title="添加"  @ok="addSubmit">
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
        :model="addForm"
        ref="addForm"
      >
        <a-form-item label="资源名称" name="apiName">
          <a-input placeholder="请输入资源名称"  v-model:value="addForm.apiName" />
        </a-form-item>
        <a-form-item label="资源路径" name="apiUri">
          <a-input placeholder="请输入资源路径" v-model:value="addForm.apiUri" />
        </a-form-item>
        <a-form-item label="资源描述">
          <a-textarea placeholder="请输入描述" :rows="4"  v-model:value="addForm.apiDes"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { message } from "ant-design-vue";
const columns = [
  {
    title: "资源ID",
    dataIndex: "apiId",
    key: "apiId",
    align: "center",
  },
  {
    title: "名称",
    dataIndex: "apiName",
    key: "apiName",
    align: "center",
  },
  {
    title: "路径",
    dataIndex: "apiUri",
    key: "apiUri",
    align: "center",
  },
  {
    title: "描述",
    dataIndex: "apiDes",
    key: "apiDes",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const data = [];

import { BarsOutlined, SearchOutlined } from "@ant-design/icons-vue";

export default {
  components: {
    BarsOutlined,
    SearchOutlined,
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      data,
      columns,
      visibleModalEdit: false, //修改的框
      visibleModalAdd: false, //添加的框
      //添加表单
      addForm: {
        apiName: "",
        apiUri: "",
        apiDes: "",
      },
      //修改表单
      editForm: {
        apiId: "",
        apiName: "",
        apiUri: "",
        apiDes: "",
      },
      rules: {
        apiName: [
          { required: true, message: "请输入资源名称", trigger: "blur" },
        ],
        apiUri: [
          { required: true, message: "请输入资源路径", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    edit(info) {
      this.visibleModalEdit = true;
       this.editForm.apiId = info.apiId;
      this.editForm.apiName = info.apiName;
      this.editForm.apiUri = info.apiUri;
      this.editForm.apiDes = info.apiDes;
    },

    //获取数据
    getData() {
      this.$axios.get("admin/api/all").then((res) => {
        this.data = res.data.data;
      });
    },
    addSubmit(){
        this.$refs.addForm
        .validate()
        .then(() => {
          this.visibleModalAdd = false;
            this.$axios
            .post("/admin/api/add", {
              apiName: this.addForm.apiName,
              apiUri: this.addForm.apiUri,
              apiDes: this.addForm.apiDes,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("添加成功");
                this.getData();
                this.$refs.addForm.resetFields();
              } else {
                message.error("添加失败");
              }
            });





        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    //修改提交
    editSubmit(){
         this.$refs.editForm
        .validate()
        .then(() => {
          this.visibleModalEdit = false;
          this.$axios
            .post("/admin/api/edit", {
              apiId:this.editForm.apiId,
              apiName: this.editForm.apiName,
              apiUri: this.editForm.apiUri,
              apiDes: this.editForm.apiDes,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("修改成功");
                this.getData();
                this.$refs.editForm.resetFields();
              } else {
                message.error("修改失败");
              }
            });
        })
        .catch((error) => {
          console.log("error", error);
        });
    }
  },
};
</script>

<style lang="less" scoped>
.resource-list {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
</style>